<template>
  <div class="app-container">
    <!-- <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="68px">
        <el-form-item label="检测站名称" prop="staName" label-width="100px">
          <el-input v-model="queryParams.staName" placeholder="请输入检测站名称" clearable style="width: 240px"
            @keyup.enter="handleQuery" @clear="handleQuery" @input="handleInput" />
        </el-form-item>
        <el-form-item label="检测站类型" prop="staType" label-width="100px">
          <el-select v-model="queryParams.staType" clearable placeholder="请选择检测站类型" @change="handleQuery"
            style="width: 240px">
            <el-option v-for="item in options1" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属企业" prop="enterpriseID" label-width="100px">
          <el-select v-model="queryParams.enterpriseID" clearable placeholder="请选择所属企业" @change="handleQuery"
            style="width: 240px">
            <el-option v-for="item in options2" :key="item.id" :label="item.entName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form> -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd">新增母线</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
    </el-row>

    <!-- 表格数据 -->
    <el-table v-loading="loading" size="large" row-key="id" :max-height="tableHeight" :data="roleList" ref="tableRef"
      @expand-change="handleExpandChange">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column type="index" label="序号" width="120" align="center">
        <template #default="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="母线编号" v-if="columns[0].visible" prop="line_code" align="center" width="200" />
      <el-table-column label="母线名称" v-if="columns[1].visible" prop="line_name" align="center" width="200" />
      <el-table-column label="设备类型" width="120" align="center" v-if="columns[2].visible">
        <template #default="scope">
          <span>{{ scope.row.line_dev_type === 0 ? '线路设备' : '母线设备' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所在地区" v-if="columns[3].visible" prop="line_addr" align="center" width="300" />
      <el-table-column label="经度" v-if="columns[4].visible" prop="longitude" align="center" width="150" />
      <el-table-column label="纬度" v-if="columns[5].visible" prop="latitude" align="center" width="150" />
      <el-table-column label="关联方式" width="120" align="center" v-if="columns[6].visible" >
        <template #default="scope">
          <span>{{ relatedTypeMap.get(scope.row.related_type) || '未知' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="上一段母线" width="120" align="center" v-if="columns[7].visible">
        <template #default="scope">
          <span>{{ scope.row.previous_Name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支线数量" width="120" align="center" v-if="columns[8].visible">
        <template #default="scope">
          <span>{{ scope.row.branch_Lines.length || 0 }}</span>
        </template>
      </el-table-column>
      <!-- 嵌套子集 -->
      <el-table-column width="1"  type="expand" align="center">
        <template #default="scope">
          <el-table v-loading="childrenLoading"  size="large" :max-height="tableHeight"
            :data="childrenList"  row-key="id" :indent="70"  :tree-props="{ children: 'branch_Lines' }">
            <el-table-column type="index"  width="80" align="center">
              <template #default="childScope">
                <span>{{  }}</span>
              </template>
            </el-table-column>
            <el-table-column type="index" label="序号" width="120" align="center">
              <template #default="childScope">
                <span>{{ childScope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="支线名称"  prop="line_name" align="center" />
            <el-table-column type="index" label="支线编号" width="220" align="center">
              <template #default="childScope">
                <span>{{ childScope.row.line_code }}</span>
              </template>
            </el-table-column>
            <el-table-column type="index" label="开关柜编号" width="220" align="center">
              <template #default="childScope">
                <span>{{ childScope.row.cabinet }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column label="设备类型" width="150" align="center">
              <template #default="childScope">
                <span>{{ childScope.row.line_dev_type === 0 ? '线路设备' : '母线设备' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="设备数量" width="150" align="center">
              <template #default="childScope">
                <span>{{ childScope.row.device || 0 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="关联方式" width="150" align="center">
              <template #default="childScope">
                <span>{{ relatedTypeMap.get(childScope.row.related_type) || '未知' }}</span>
              </template>
            </el-table-column> -->
            <el-table-column fixed="right" label="操作" align="center" 
              class-name="small-padding fixed-width">
              <template #default="childScope">
                <el-button link type="primary" icon="Plus" @click="handleAdd2(childScope.row)">添加下级支线</el-button>
                <el-button link type="primary" icon="Edit" @click="handleUpdate2(scope.row,childScope.row)">修改</el-button>
                <el-button link type="danger" icon="Delete" @click="handleDelete2(childScope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" min-width="340px" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Plus" @click="handleAdd3(scope.row)">添加支线</el-button>
          <el-tooltip content="还没有支线" :disabled="scope.row.branch_Lines&&scope.row.branch_Lines.length>0"  placement="top">
            <span style="padding-right: 8px;" >
              <el-button link type="primary" :icon="scope.row.isExpanded ? ArrowUp : ArrowDown"
                @click="handleTonav(scope.row)" :disabled="!scope.row.branch_Lines || scope.row.branch_Lines.length === 0">
                支线管理
              </el-button>
            </span>
          </el-tooltip>
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改角色配置对话框 -->
    <el-dialog :title="title" v-model="open" width="600px" append-to-body :close-on-click-modal="false">
      <el-form ref="roleRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="母线名称" prop="line_name">
          <el-input v-model.trim="form.line_name" maxlength="20" placeholder="请输入母线名称" />
        </el-form-item>
        <el-form-item label="位置信息" prop="line_addr">
          <el-input v-model="form.line_addr" type="textarea" :maxlength="100" placeholder="请输入或选择位置信息"
            style="width: 370px" />
          <el-button type="primary" @click="openMapPicker" style="margin-left: 10px">地图选点</el-button>
        </el-form-item>
        <el-form-item label="上一段母线" prop="staType" label-width="100px">
          <el-select v-model="form.previous_ID" placeholder="请选择检测站类型" @change="handleChange" style="width: 540px">
            <el-option v-for="item in options1" :key="item.id" :label="item.line_name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <el-form-item label="关联类型" label-width="100">
        <el-radio-group v-model="form.related_type">
          <el-radio :value="0">无</el-radio>
          <el-radio :value="1">母线</el-radio>
          <el-radio :value="2">监测点关联</el-radio>
        </el-radio-group>
      </el-form-item>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
      <!-- 添加或修改角色配置对话框 22222222-->
      <el-dialog :title="title2" v-model="open2" width="600px" append-to-body :close-on-click-modal="false">
      <el-form ref="roleRef2" :model="form2" :rules="rules2" label-width="100px">
        <el-form-item label="上一段支线" prop="previous_ID">
          <el-cascader style="width: 600px;" ref="cascaderRef"  @change="handleCascaderChange"
           v-model="form2.previous_ID" :options="options4" :props="{ checkStrictly: true,children:'branch_Lines',label:'line_name',value:'id'}" clearable />
        </el-form-item> 
        <el-form-item label="支线名称" prop="line_name">
          <el-input v-model.trim="form2.line_name" maxlength="20" placeholder="请输入支线名称" />
        </el-form-item>
        <el-form-item label="开关柜编号" prop="cabinet">
          <!-- 使用 oninput 事件过滤输入，只保留字母和数字 -->
          <el-input v-model.trim="form2.cabinet" maxlength="20" placeholder="请输入开关柜编号" @input="filterCabinetInput" />
        </el-form-item>
        <!-- <el-form-item label="设备编码" prop="device_ID" label-width="100px">
          <el-select v-model="form2.device_ID" placeholder="请选择设备" multiple @change="handleChange" style="width: 540px">
            <el-option v-for="item in options2" :key="item.id" :label="item.dev_name_code" :value="item.id" />
          </el-select>
        </el-form-item> -->
      </el-form>
      <!-- <el-form-item label="关联类型" label-width="100">
        <el-radio-group v-model="form.related_type">
          <el-radio :value="1">母线</el-radio>
          <el-radio :value="2">监测点关联</el-radio>
        </el-radio-group>
      </el-form-item> -->
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm2">确 定</el-button>
          <el-button @click="cancel2">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <AMapPointPickerInDialog ref="mapPickerDialogRef" @confirm="handleConfirm" />
    <!-- <MessagePopup ref="messagePopupRef" :show="hasNewMessage" @close="hasNewMessage = false" /> -->
  </div>
</template>
  
  <script setup>
  import { useRoute } from 'vue-router'; // Import useRoute
  import { useInfoStore } from '@/store/modules/info.js'
  import AMapPointPickerInDialog from '@/components/Amap/AMapPointPickerInDialog.vue';
  import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'; // 引入图标

  const userInfo = useInfoStore();
  const tableHeight = ref(document.documentElement.scrollHeight - 280 + "px");
  const route = useRoute(); // 获取当前路由信息
  const { proxy } = getCurrentInstance();
  const mapPickerDialogRef = ref(null); //地图示例
  const tableRef = ref(null); // 表格实例引用
  
  const roleList = ref([]);
  const loading = ref(false);
  const showSearch = ref(true);
  const total = ref(0);
  const open = ref(false);
  const open2 = ref(false);
  const title = ref("");
  const title2 = ref("");
  const menuRef = ref(null);
  // 将数组改为 Map 对象
  const relatedTypeMap = new Map([
    [1, '母线'],
    [2, '监测点关联']
  ]);
  const options1 = ref([]);
  // 新增：用于存储从路由获取的初始ID
  const initialStationID = ref(null);
  const initialEntID = ref(null);

  
  // 子线form 母线编号
  const master_ID = ref(null);
  const child_previous_ID = ref(null);
  const options2 = ref([]);
  const options3 = ref([
    { id: 0, name: '线路设备' },
    { id: 1, name: '母联设备' },
  ]);
  const options4 = ref([]); //支线节点 树形数据
  const childrenList = ref([]); //支线数据
  const childrenLoading = ref([]); //支线数据
  const childrenId = ref(null); //支线数据
  const childrenId2 = ref(null); //支线数据
  const cascaderRef = ref(null);
  
  const data = reactive({
    form: {
      id: null,
      line_name: null,//母线名称
      ent_ID: null,//企业ID
      stationID: null,//监测站点ID
      previous_ID: 0,//上一端母线ID:0为起始母线
      previous_Name: null,//上一段母线名称
      related_type: 0,//关联方式：0无关联、1母线、2监测点关联
      longitude: null,//经度
      latitude: null,//纬度
      line_addr: null,//经纬度子线
    },
    form2: {
      id: null,
      previous_ID: null,//上一段支线
      line_name: null,//支线名称
      master_ID: null,//母线编号ID
      device_ID: [],//设备ID
      related_type: 0,//关联方式：0无关联、1母线、2监测点关联
      line_dev_type: 0,//0-线路设备，1-母联设备
      line_modelid: 0,//无模板可填0
      line_style: 0,//负数为线路上方设备，0和正数为线路下方设备
      // longitude: null,//经度
      // latitude: null,//纬度
      // line_addr: null,//所在地区
      state: 1,//是否有效:0无效，1有效
      cabinet: null,//开关柜编号
    },
    queryParams: {
      pageNo : 1,
      pageSize: 10,
      ent_ID:null,//企业id
      stationID:null,//监测站点ID
      line_code:null,//母线编号：自动编号
      line_name:null,//母线名称
      line_addr:null,//经纬度子线
      state:1,//是否有效：0停用、1可用
    },
    rules: {
      line_name: [{ required: true, message: "母线名称不能为空", trigger: "blur" }],
      line_addr: [{ required: true, message: "位置信息不能为空", trigger: "change" }],
    },
    rules2: {
      line_name: [{ required: true, message: "支线名称不能为空", trigger: "blur" }],
      previous_ID: [{ required: true, message: "请选择所属上一段支线", trigger: "blur" }],
      cabinet: [{ required: true, message: "开关柜编号不能为空", trigger: "blur" }],
    },
  });
   // // 组件挂载时初始化连接
   onMounted(() => {
    if(route.query){
      initialStationID.value = route.query.id; // 存储初始值
      initialEntID.value = route.query.enterpriseID; // 存储初始值
      queryParams.value.stationID = route.query.id; // 存储初始值
      queryParams.value.ent_ID = route.query.enterpriseID; // 存储初始值
    }
    getList();

    });
  
  // 列显隐信息
  const columns = ref([
    { key: 0, label: `母线编号`, visible: true },
    { key: 1, label: `母线名称`, visible: true },
    { key: 2, label: `设备类型`, visible: true },
    { key: 3, label: `所在地区`, visible: true },
    { key: 4, label: `经度`, visible: true },
    { key: 5, label: `纬度`, visible: true },
    { key: 6, label: `关联方式`, visible: true },
    { key: 7, label: `上一段母线`, visible: true },
    { key: 8, label: `支线数量`, visible: true },
  ]);
  
  const { queryParams, form, rules, form2, rules2} = toRefs(data);
  
  // 获取选中的name字段
  function handleChange(value) {
    const selectedOption = options1.value.find(item => item.id === value);
    console.log(selectedOption);
    
    if (selectedOption) {
      form.value.previous_Name = selectedOption.line_name;
    }
  }
  // 主动关闭弹层
  function handleCascaderChange(e) {
    form2.value.previous_ID = e[e.length-1];
    cascaderRef.value.togglePopperVisible(false)
  }
  
// 过滤输入内容，只保留字母和数字
  function filterCabinetInput(e) {
    // 使用正则表达式替换非字母和数字的字符
    form2.value.cabinet = e.replace(/[^a-zA-Z0-9]/g, '');
  }
  // 地图选点信息
  function handleConfirm(point) {
    if(point){
      form.value.longitude = point.longitude;
      form.value.latitude = point.latitude;
      form.value.line_addr = point.name;
      // form.value.geoCode = point.adcode;
      // form.value.geoAddr = point.fullAddress;
    }
  }
    /** 查询企业下的所有设备 */
  function getList3() {
    proxy.cloudTv_API.GetDeviceList({
      ent_id:initialEntID.value,
    }).then(response => {
      options2.value =  response.data || [];
      if(options2.value?.length > 0){
        options2.value.forEach(item => {
          item.dev_name_code = item.dev_name +' - '+ item.dev_code;
        });
      }
    });
  }
   /** 查询所有列表 */
   function getList2() {
    // initialStationID.value
    proxy.cloudTv_API.GetMasterLineList({
      stationID:initialStationID.value,
    }).then(response => {
      options1.value =  response.data || [];
      if(options1.value?.length < 1){
        options1.value.unshift({id:0,line_name:'起始母线'});
      }else{
        form.value.previous_ID = options1.value[0].id;
      }
    });
  }

  /** 查询列表 */
  function getList() {
    // 折叠所有已展开的行
    if (tableRef.value && roleList.value) {
      roleList.value.forEach(row => {
        tableRef.value.toggleRowExpansion(row, false);
      });
    }
    loading.value = true;
    proxy.cloudTv_API.GetMasterLinePageList(queryParams.value).then(response => {
      // 初始化子数据容器和展开状态
      roleList.value = (response.data.list || []).map(item => ({ ...item, children: [], childrenLoading: false, isExpanded: false })); // 添加 isExpanded
      total.value = response.data.total || 0;
      loading.value = false;
    });
  }
  // 输入时触发的防抖处理函数
  let timer = null;
  function handleInput() {
    clearTimeout(timer);
    timer = setTimeout(handleQuery, 300);
  }
  
  /** 搜索按钮操作 */
  function handleQuery() {
    queryParams.value.pageNo = 1;
    getList();
  }
  
  /** 重置按钮操作 */
  function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
  }
  
  /** 删除按钮操作 */
  function handleDelete(row) {
    proxy.$modal.confirm('是否确认删除主线"' + row.line_name + '"的数据项?').then(function () {
      proxy.cloudTv_API.DelMasterLine({ id: row.id }).then(response => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
      });
    })
  }
 /** 删除按钮操作 */
 function handleDelete2(row) {
    proxy.$modal.confirm('是否确认删除支线"' + row.line_name + '"的数据项?').then(function () {
      proxy.cloudTv_API.DelBranchLine({ id: row.id }).then(response => {
        getListchLineList();
        proxy.$modal.msgSuccess("删除成功");
      });
    })
  }
  
  /** 导出按钮操作 */
  function handleExport() {
    proxy.download("system/role/export", {
      ...queryParams.value,
    }, `role_${new Date().getTime()}.xlsx`);
  }
  
  
  /** 重置新增的表单以及其他数据  */
  function reset() {
    getList2();
    if (menuRef.value != undefined) {
        menuRef.value.setCheckedKeys([]);
    }
    form.value = {
      id: null,
      line_name: null,//母线名称
      ent_ID: initialEntID.value, // 重新赋初始值
      stationID: initialStationID.value, // 重新赋初始值
      previous_ID: 0,//上一端母线ID:0为起始母线
      previous_Name: null,//上一段母线名称
      related_type: 0,//关联方式：0无关联、1母线、2监测点关联
      longitude: null,//经度
      latitude: null,//纬度
      line_addr: null,//经纬度子线

    };
    proxy.resetForm("roleRef");
  }

  /** 重置新增的表单以及其他数据  */
  function reset2() {
    form2.value = {
      id: null,
      line_name: null,//支线名称
      previous_ID: child_previous_ID.value || 0,//上一段支线
      master_ID: master_ID.value,//母线编号ID
      device_ID: [],//设备ID
      related_type: 0,//关联方式：0无关联、1母线、2监测点关联
      line_dev_type: 0,//0-线路设备，1-母联设备
      line_modelid: 0,//无模板可填0
      line_style: 0,//负数为线路上方设备，0和正数为线路下方设备
      // longitude: null,//经度
      // latitude: null,//纬度
      // line_addr: null,//所在地区
      state: 1,//是否有效:0无效，1有效
      // Device_ID:0,//传感器

    };
    proxy.resetForm("roleRef2");
  }
  // 支线列表更新
  function getListchLineList(){
    childrenLoading.value = true;
    proxy.cloudTv_API.GetBranchLineList({
      master_ID:childrenId.value
    }).then(response => {
      childrenList.value = response.data || [];
    }).finally(()=>{
      childrenLoading.value = false;
    })
  }
    // 支线列表更新 -- 下拉数据
  function getListchLineList2(){
    options4.value = [];
    childrenLoading.value = true;
    proxy.cloudTv_API.GetBranchLineList({
      master_ID:childrenId2.value
    }).then(response => {
      let data = response.data || [];
      options4.value = [ { id: 0, line_name: '起始支线', branch_Lines: data }] 
    }).finally(()=>{
      childrenLoading.value = false;
    })
  }
  
  /** 总览跳转 */
  function handleTonav(row) {
    childrenId.value = row.id;
    getListchLineList();
    // // 关闭其他行的下拉
    roleList.value.forEach(item => {
      if (item.id !== row.id) {
        tableRef.value.toggleRowExpansion(item, false);
        item.isExpanded = false;
      }
    });
    // // 切换当前点击行的展开状态
    tableRef.value.toggleRowExpansion(row);
  }

  /** 行展开/折叠事件 */
  function handleExpandChange(row, expandedRows) {
    const isExpanded = expandedRows.some(r => r.id === row.id);
    row.isExpanded = isExpanded; // 更新行的展开状态
    // 检查是否已展开且 branch_Lines 有数据且子数据尚未加载或为空且不在加载中
    if (isExpanded && row.branch_Lines && row.branch_Lines.length > 0 && !row.childrenLoading && (!row.children || row.children.length === 0)) {
      // 如果是展开状态，有 branch_Lines 数据，且子数据尚未加载或为空，且不在加载中，则加载子数据
      row.childrenLoading = true;
      // 直接使用父行的 branch_Lines 字段作为子数据
      // 添加 || [] 以防 branch_Lines 为 null 或 undefined
      row.children = row.branch_Lines || [];
      row.childrenLoading = false;
      // 移除模拟异步加载和模拟数据
    } else if (!isExpanded) {
       // 可选：如果需要在折叠时清空子数据以节省内存
       row.children = [];
    }
  }
  
  
  /** 添加 */
  function handleAdd() {
    reset();
    open.value = true;
    title.value = "新增母线";
  }
      /** 添加 */
  function handleAdd3(row) {
    master_ID.value = row.id; //母
    child_previous_ID.value =  0;
    childrenId2.value = row.id;
    getListchLineList2();
    reset2();
    open2.value = true;
    title2.value = "新增支线";
  }
    /** 添加 */
  function handleAdd2(childScope) {
    master_ID.value = childScope.master_LineID;
    child_previous_ID.value = childScope.previous_ID;
    getListchLineList2();
    reset2();
    open2.value = true;
    title2.value = "新增下级支线";
  }
  
  /** 修改 */
  // 在 handleUpdate 方法中
  function handleUpdate(row) {
    reset();
    // 填充表单数据
    Object.keys(form.value).forEach(key => {
      form.value[key] = row[key];
      if (form.value[key] == undefined) {
        form.value[key] = null
      }
    });
    open.value = true;
    title.value = "修改母线";
  }

   /** 修改 */
  function handleUpdate2(row2,row) {
    childrenId2.value = row2.id;
    getListchLineList2();
    reset2();
    // 填充表单数据
    Object.keys(form2.value).forEach(key => {
      form2.value[key] = row[key];
      if (form2.value[key] == undefined) {
        form2.value[key] = null
      }
    });
    form2.value.master_ID = row.master_LineID;
    form2.value.previous_ID = row.previous_ID;;
    form2.value.device_ID = [];
    open2.value = true;
    title2.value = "修改支线";
  }
  
  // 打开地图选点
  function openMapPicker() {
    if (mapPickerDialogRef.value) {
      // 如果有经纬度，解析并传入
      let position = null;
      if (form.value.lngLat) {
        const [lng, lat] = form.value.lngLat.split(',');
        if (lng && lat) {
          position = { lng: parseFloat(lng), lat: parseFloat(lat) };
        }
      }
      mapPickerDialogRef.value.openDialog(position);
    }
  }
  
  /** 提交按钮 */
  function submitForm() {
    proxy.$refs["roleRef"].validate(valid => {
      if (valid) {
        if (form.value.id) {
          proxy.cloudTv_API.EditMasterLine({
            ...form.value,
          }).then(response => {
            proxy.$modal.msgSuccess("修改成功");
            open.value = false;
            getList();
          });
        } else {
          proxy.cloudTv_API.AddMasterLine(form.value).then(response => {
            proxy.$modal.msgSuccess("新增成功");
            open.value = false;
            getList();
          });
        }
      }
    });
  }
    /** 提交按钮 */
function submitForm2() {
    proxy.$refs["roleRef2"].validate(valid => {
      if (valid) {
        if (form2.value.id) {
          proxy.cloudTv_API.EditBranchLine({
            ...form2.value,
          }).then(response => {
            proxy.$modal.msgSuccess("修改成功");
            open2.value = false;
            getListchLineList();
            getList();

          });
        } else {
          proxy.cloudTv_API.AddBranchLine(form2.value).then(response => {
            proxy.$modal.msgSuccess("新增成功");
            open2.value = false;
            getListchLineList();
            getList();


          });
        }
      }
    });
  }
  // 复制
  async function copy(text) {
    console.log(text);
    try {
      await navigator.clipboard.writeText(text);
      proxy.$modal.msgSuccess('复制成功');
    } catch (err) {
      console.log(err);
  
    }
  }
  
  /** 取消按钮 */
  function cancel() {
    open.value = false;
    reset();
  }
  /** 取消按钮 */
  function cancel2() {
    open2.value = false;
    reset2();
  }
  
  </script>


<style lang="scss" scoped>

:deep(.el-table__expand-icon .el-icon){
    font-size: 14px !important; 
}
</style>
  